<template>
	<view class="travel-info flex--col">
		<view class="travel-heading">
			<text class="text--main-dark">出行信息</text>
		</view>
		<view class="travel-content flex--col">
			<view class="travel-content--info flex--col" v-show="infoIndex === 0">
				<view class="travel-content-item travel-partners">
					<image aria-label="出行双方" src="@/static/comment/people.svg" class="icon"></image>
					<text class="text--secondary-dark">{{travel.otherName}},{{travel.name}}</text>
				</view>
				<view class="travel-content-item travel-contact">
					<text class="text--secondary-dark--heavy">联系电话</text>
					<text class="text--secondary-dark">{{travel.phone}}</text>
				</view>
				<view class="travel-content-item travel-date">
					<text class="text--secondary-dark--heavy">出游日期</text>
					<text class="text--secondary-dark">{{travel.date}}</text>
				</view>
				<view class="travel-content-item travel-time flex--row">
					<view>
						<text class="text--secondary-dark--heavy">碰面时间</text>
						<text class="text--secondary-dark">{{travel.startTime}}</text>
					</view>
					<view>
						<text class="text--secondary-dark--heavy">结束时间</text>
						<text class="text--secondary-dark">{{travel.endTime}}</text>
					</view>
				</view>
			</view>
			<view class="travel-content--edit flex--col" v-show="infoIndex === 1">
				<text class="text--thirdary-grey">修改的结果会立即通知对方。</text>
				<TimeSelector @changeOption="handleChangeTimeOption" :timeOptions="travelTime"></TimeSelector>
				<view class="travel-button" @click="handleUpdateTravel(1)">
						确认修改
				</view>
			</view>
			<view class="travel-content--cancel flex--col" v-show="infoIndex === 2">
				<text class="text--thirdary-grey">取消出行后会立即通知对方。</text>
				<view class="travel-input flex--row">
					<input type="text" placeholder="填写你的取消理由" v-model="modifyReason"/>
					<image aria-label="图标笔" src="@/static/pen-Bold.svg" class="icon"></image>
				</view>
				<view class="travel-button" @click="handleUpdateTravel(2)">
					确认取消
				</view>
			</view>
		</view>
		<view class="split-line">
		</view>
		<view class="travel-switch flex--row">
			<view class="travel-switch-item" :class="{'active':infoIndex === 1}" @click="switchTab(1)" role="button">
				修改出行
			</view>
			<view class="travel-switch-item" :class="{'active':infoIndex === 2}" @click="switchTab(2)" role="button">
				取消出行
			</view>
		</view>
	</view>
</template>

<script>
	import TimeSelector from "@/components/TimeSelector/TimeSelector.vue"
	import * as TravelApi from "@/api/travel/travel.js"
	import { timeFormat } from "@/utils/util.js"
	import { REFERSH_TRAVEL_TIMER } from "@/core/constant/event"
	
	export default {
		props:['travel'],
		components:{
			TimeSelector
		},
		
		data(){
			return {
				infoIndex:0,
				travelTime:{
					date:this.travel.date,
					startTime:this.travel.startTime,
					endTime:this.travel.endTime
				},
				modifyReason:""
			}
		},
		methods:{
			
			switchTab(index){
				if(this.infoIndex === index){
					this.infoIndex = 0
				}else{
					this.infoIndex = index
				}
			},
			handleChangeTimeOption(property,timeOption){
				this.travelTime.date = timeOption.date
				this.travelTime.startTime = timeOption.startTime
				this.travelTime.endTime = timeOption.endTime
			},
			async handleUpdateTravel(type){
				if(type === 2 && this.modifyReason === ""){
					this.$confirm({content:"请填写取消理由！"})
					return
				}
				
				await this.updateTravel(type)
				// 刷新TravelTimer,出行页面的出行列表,首页的出行日历
				
				uni.$emit(REFERSH_TRAVEL_TIMER)
				uni.navigateBack()
				
			},
			async updateTravel(type){
				const params = {
					travelId:this.travel.travelId,
					userId:this.travel.userId,
					type,
				}
				if(type === 1){
					params.startTime = `${this.travelTime.date} ${this.travelTime.startTime}:00`
					params.endTime = `${this.travelTime.date} ${this.travelTime.endTime}:00`
				}else if(type == 2){
					params.modify = this.modifyReason
				}
				
				await TravelApi.updateTravel(params)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 26px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark--heavy{
		font-size: 20px;
		color:#333;
		font-weight: 700;
		letter-spacing: 0.6px;
	}
	
	
	.text--secondary-dark{
		font-size: 18px;
		color:#444;
	}
	
	.text--thirdary-grey{
		font-size: 14px;
		font-weight: 100;
		color:#444;
	}
	
	.split-line{
		height:1px;
		background: #E5E5E5;
	}
	

	.travel-info{
		@include border-four-roundings;
		width:100%;
		padding:16px 10px;
		box-sizing:border-box;
		gap:12px;
	}
	
	.travel-content{
		justify-content: center;
		padding:8px 0px;
		
		&--info{
			gap:24px;
			
			.travel-content-item{
				display: flex;
				align-items: center;
				gap:8px;
			}
			
			
			.travel-time{
				justify-content: space-between;
			}
		}
		
		&--edit,&--cancel{
			align-items: center;
		}
		
		&--cancel{
			gap:8px;
			
			.travel-input{
				padding:8px 0px;
				@include border-four-roundings;
				width:90%;
				
				justify-content: space-around;
				align-items: center;
			}
		}
	
		
		
		.travel-button{
			padding:8px 16px;
			border-radius: 16px;
			background-color: $main-color;
			
			font-size: 18px;
			font-weight: 700;
			letter-spacing: 0.2px;
			color:#fff;
		}
	
	}
	
	
	.travel-switch{
		gap:32px;
		&-item{
			color:#333;
			font-weight: 700;
			
			@include border-four-roundings;
			padding:4px 8px;
			
			&.active{
				color:#fff;
				background:#333;
			}
		}
	}
</style>